import {GlobalToken} from "antd";
import {CSSInterpolation} from "@ant-design/cssinjs";

export const genDataSourceSetterStyle = (
    prefixCls: string,
    token: GlobalToken,
): CSSInterpolation => [
    {
        [`.${prefixCls}`]: {
            [`::-webkit-scrollbar`]: {
                width: '5px',
                height: '5px'
            },
            [`::-webkit-scrollbar-thumb`]: {
                backgroundColor: `rgba(0, 0, 0, 0.2)`,
                borderRadius: 0,
                transition: 'all 0.25s ease-in-out'
            },
            [`::-webkit-scrollbar-thumb:hover`]: {
                backgroundColor: `rgba(0, 0, 0, 0.3)`
            },
            [`&-node-title`]: {
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                [`&-icon`]: {
                    transition: `all 0.15s ease-in-out`,
                    opacity: 0,
                    [`&:hover`]: {
                        color: token.colorPrimary
                    }
                }
            },
            [`&-layout`]: {
                display: 'flex',
                justifyContent: 'space-around',
                border: `1px solid ${token.colorBorder}`,
                borderRadius: '3px',
                [`.ant-tree-treenode`]: {
                    paddingRight: '10px',
                    whiteSpace: 'nowrap',
                    [`&:hover`]: {
                        [`.dn-data-source-setter-node-title-icon`]: {
                            opacity: 1
                        }
                    }
                },
                [`&-item`]: {
                    position: 'relative',
                    [`&.left`]: {
                        width: `40%`,
                        borderRight: `1px solid ${token.colorBorder}`
                    },
                    [`&.right`]: {
                        width: '60%'
                    },
                    [`&-header`]: {
                        display: 'flex',
                        flex: 'none',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        height: '40px',
                        padding: '8px 12px 9px',
                        borderBottom: `1px solid ${token.colorBorder}`,
                        borderRadius: '2px 2px 0 0'
                    },
                    [`&-content`]: {
                        padding: '2%',
                        height: '300px',
                        maxHeight: '300px',
                        overflow: 'scroll'
                    }
                }
            }
        }
    }
]